<template>
  <div class="common-layout">
    <el-container>
      <el-header style="border-style: groove;border-width: 2px;height: 80px;">
        <div style="margin-top: 20px;">
            <el-button type="primary" @click="open(null,'新增')" plain>添加用户</el-button>
        </div>
      </el-header  >
      <el-main style="border-style: groove;border-width: 2px;height: 600px;margin-top: 15px;">
        <el-table
            :data="tableData"
            style="width: 100%;height: 500px;"
            :row-class-name="tableRowClassName"
        >
            <el-table-column fixed type="index" label="序号" width="60px" />
            <el-table-column prop="userName" label="用户"  />
            <el-table-column prop="roleName" label="角色" width="200px"/>
            <el-table-column prop="sex" label="性别" >
                <template v-slot="scoped">
                    <el-tag type="primary" v-if="scoped.row.sex==false">男</el-tag>
                    <el-tag type="danger" v-if="scoped.row.sex==true">女</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="provinceName" label="省份" />
            <el-table-column prop="cityName" label="市" />
            <el-table-column prop="contryName" label="县"  />
            <el-table-column prop="detailAddress" label="地址详情" width="160">
                <template v-slot="scoped">
                    <el-tooltip :content="scoped.row.detailAddress" effect="customized">
                           <span>{{ scoped.row.detailAddress.substr(0,5) }}......</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="创建人" />
            <el-table-column prop="createTime" label="创建日期" width="200">
                <template v-slot="scoped">
                    <span>{{moment(scoped.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updateUserName" label="修改人" />
            <el-table-column prop="updateTime" label="修改日期" width="200">
                 <template v-slot="scoped">
                    <span v-if="scoped.row.updateTime!=null">{{moment(scoped.row.updateTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" prop="address" label="操作" width="160">
                <template v-slot="scoped">
                    <el-button type="warning" @click="open(scoped.row,'修改')" round>修改</el-button>
                    <el-button type="danger" @click="remove(scoped.row)" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block" style="margin-top: 20px;">
            <el-pagination
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[15, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.listcount"
            />
        </div>
      </el-main>
    </el-container>
  </div>



<!-- 添加用户对话框 -->
   <el-dialog v-model="logic.open" :title="logic.title" width="1000" align-center draggable>
    <el-form  :model="form"   >
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
            <el-input v-model="form.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio :value="true" v-model="form.sex">女</el-radio>
            <el-radio :value="false" v-model="form.sex">男</el-radio>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select v-model="form.departMentId" placeholder="部门" >
                    <el-option v-for="a in departData" :label="a.departName" :value="a.id" />
                </el-select>
          </el-form-item>      
        <el-form  :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="所在的" :label-width="formLabelWidth">
                <el-select v-model="form.t_Province" @change="getCity(form.t_Province)" placeholder="请选择省份"  >
                    <el-option v-for="a in provinceData" :label="a.provinceName" :value="a.id" />
                </el-select>
            </el-form-item>
            <el-form-item  :label-width="formLabelWidth">
                <el-select v-model="form.t_CityId"  @change="getcontry(form.t_CityId)" placeholder="请选择市区">
                    <el-option v-for="a in cityData" :label="a.cityName" :value="a.id" />
                </el-select>
            </el-form-item>
            <el-form-item  :label-width="formLabelWidth">
            <el-select v-model="form.t_ContryId" placeholder="请选择县">
                <el-option v-for="a in contryData" :label="a.contryName" :value="a.id" />
            </el-select>
        </el-form-item>
        </el-form>
        <el-form-item label="详细地址" :label-width="formLabelWidth"  >
             <el-input
                v-model="form.detailAddress"
                style="width: 500px"
                :rows="2"
                type="textarea"
                placeholder="详细地址"
            />
        </el-form-item>
       
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.open = false">取消</el-button>
        <el-button type="primary" @click="adduser()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>



<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import {readBasic,writeBasic} from "@/Helper/axiosSetting"
import { ElMessage,ElMessageBox, type FormRules ,type FormInstance} from 'element-plus'
import moment from 'moment'
onMounted(()=>{
    getUserList()
    getdepartData()
})

const departData=ref<any>([])
const getdepartData=()=>{
    readBasic.get("api/Excused/GetDepartList").then(res=>{
        departData.value=res.data.data
    })
}


const provinceData=ref<any>({})
const getProvince=()=>{
    readBasic.get("api/Manage/GetProvince").then(res=>{
        provinceData.value=res.data.data
    })
}

const cityData=ref<any>({})
const getCity=(provinceId:any)=>{
    cityData.value=[]
    form.t_CityId=null
    form.t_ContryId=null
    readBasic.get("api/Manage/GetCity",{params:{provinceId:provinceId}}).then(res=>{
        cityData.value=res.data.data
    })
}
const contryData=ref([{
    "id": 0,
    "contryName": ""
}])
const getcontry=(cityId:any)=>{
    contryData.value=[]
    form.t_ContryId=null
    readBasic.get("api/Manage/GetContry",{params:{cityId:cityId}}).then(res=>{
        contryData.value=res.data.data
    })
}


const logic = reactive({
    open:false,
    title:""
})
const formLabelWidth = '140px'

const form = reactive({
  "id":0,
  "password":"",
  "userName": "",
  "sex": true,
  "t_CityId": null,
  "t_Province": null,
  "t_ContryId": null,
  "createTime": "",
  "detailAddress": "",
   "departMentId":null
})

const open=(row:any,titles:string)=>{
    logic.open=true
    getProvince()
    
    logic.title=titles
    if(logic.title=="新增"){
        form.userName="",
        form.sex=false,
        form.t_CityId=null,
        form.t_Province=null,
        form.t_ContryId=null,
        form.detailAddress=""
    }else if(logic.title=="修改"){
        getCity(row.t_Province)
        getcontry(row.t_CityId)
        form.id=row.id
        form.userName=row.userName,
        form.password=row.password
        form.sex=row.sex,
        form.t_Province=row.t_Province,
        form.t_CityId=row.t_CityId,
        form.t_ContryId=row.t_ContryId,
        form.createTime=row.createTime,
        form.detailAddress=row.detailAddress
        form.departMentId=row.deparmentId
        
    }

}



//添加用户
const adduser=()=>{
    if(form.userName==''){
      ElMessage.error("用户名不能为空");
      return
    }
    if(form.detailAddress==""){
      ElMessage.error("详细地址不能为空");
      return
    }
    if(logic.title=="新增"){
        console.log(form)
        writeBasic.post("api/Manage/AddUser",form).then(res=>{
            if(res.data.code==200){
                ElMessage.success("添加成功");
                getUserList()
                logic.open=false
            }else{
                ElMessage.error(res.data.message)
            }
        })
    }else if(logic.title=="修改"){
        writeBasic.post("api/Manage/UpdateUser",form).then(res=>{
            if(res.data.code==200){
                ElMessage.success("修改成功");
                getUserList()
                logic.open=false
            }else{
                ElMessage.error(res.data.message)
            }
        })
    }

    
}



const remove = (row:any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      writeBasic.post("api/Manage/RemoveUser",row).then(res=>{
        if(res.data.code==200){
            ElMessage.success('删除成功');
            getUserList()
        }else{
            ElMessage.error("删除失败")
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}



interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
//获取用户列表
const tableData= ref([])
const page=reactive({
    PageIndex:1,
    PageSize:15,
    listcount:0
})
watch(page,()=>{
    getUserList()
},{deep:true})
const getUserList=()=>{
    readBasic.get("api/Manage/GetUserList",{params:{
        PageIndex:page.PageIndex,
        PageSize:page.PageSize
    }}).then(res=>{
        tableData.value=res.data.data.list
        page.listcount=res.data.data.recordCount
    })
}


</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}


.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
